<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/updateVideo.css"/>
    <link rel="stylesheet" href="<%=basePath %>/css/list.css">
    <link href="<%=basePath %>/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath %>/css/formsCSS.css" rel="stylesheet" type="text/css"/>
    <script src="<%=basePath%>/lib/My97DatePicker/WdatePicker.js"></script>
    <script src="<%=basePath %>/js/jquery.min.js"></script>
    <script src="<%=basePath %>/js/formsJS.js"></script>
</head>
<body>
<div class="connect_wrap">
    <h3 style="text-align: center;">分享内容</h3>
    <div class="row cl" style="max-width:88%;margin-left:8%;">
        <div class="labelText"></div>
        <form action="<%=basePath%>/course/share/edit" method="post" enctype="multipart/form-data">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <div class="boxs">
                    <input type="hidden" name="id" value="${courseShare.id}">
                    <input type="text" class="inputBox" placeholder="标题" name="title"
                           value="${courseShare.title}">
                    <input type="text" class="inputBox" placeholder="副标题" name="subtitle"
                           value="${courseShare.subtitle}">
                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">活动类别
                        </div>
                        <select name="shareType" class="selectBox" required="required">
                            <option value="1" ${courseShare.shareType == 1 ? 'selected="selected"' : '' }>课程</option>
                            <option value="2" ${courseShare.shareType == 2 ? 'selected="selected"' : '' }>团购</option>
                        </select>
                    </div>
                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">课程类别
                        </div>
                        <select id="courseType" name="type" class="selectBox" onchange="choice()"
                                required="required">
                            <option value="1" ${courseShare.type == 1 ? 'selected="selected"' : '' }>课程</option>
                            <option value="2" ${courseShare.type == 2 ? 'selected="selected"' : '' }>章节</option>
                            <option value="3" ${courseShare.type == 3 ? 'selected="selected"' : '' }>课程包</option>
                        </select>
                    </div>
                    <div style="width:90%;margin-top:30px" id="courseIdDiv">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程
                        </div>
                        <select id="courseIds" name="courseIds" class="selectBox">
                            <c:forEach items="${courses}" var="c">
                                <option value="${c.id}" ${courseShare.type == 1 and c.id == courseShare.foreignId ? 'selected="selected"' : ''}>${c.id}:${c.courseName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px" id="courseChapterIdDiv">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程
                        </div>
                        <select id="courseChapterIds" name="courseChapterIds" class="selectBox"
                                onchange="changeCourse()">
                            <c:forEach items="${courses}" var="c">
                                <option value="${c.id}" ${courseShare.type == 2 and c.id == courseShare.courseId ? 'selected="selected"' : ''}>${c.id}:${c.courseName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="chapterDiv">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择章节
                        </div>
                        <select id="chapterIds" name="chapterIds" class="selectBox">
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="cardDiv">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程包
                        </div>
                        <select id="cardIds" name="cardIds" class="selectBox">
                            <c:forEach items="${cards}" var="c">
                                <option value="${c.id}" ${courseShare.type == 3 and c.id == courseShare.foreignId ? 'selected="selected"' : ''}>${c.id}:${c.cardName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <input type="file" class="inputBox" placeholder="活动图片" name="file"
                           value="${courseShare.images}" onchange="showImg1()" id="img"/>
                    <br/><br/><img src="${WF_CONSOLE_CONFIG_OSS_URL}${courseShare.images}" id="showImg" width="320"
                                   height="320"
                                   <c:if test="${empty courseShare.images}">style="display: none;"</c:if> />
                    <input type="submit" value="修改" class="true"/>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    function showImg1() {
        var url = window.URL.createObjectURL($("#img")[0].files[0]);
        $("#showImg").attr('src', url);
        $("#showImg").css("display", "");
    };

    function changeCourse() {
        var chapters = ${chapters};
        var id = $("#courseChapterIds").val();
        $("#chapterIds").empty();
        for (var i = 0; i < chapters[id].length; i++) {
            $("#chapterIds").append("<option value='" + chapters[id][i].id + "'>" + chapters[id][i].chapterName + "</option>");
        }
    }

    function choice() {
        var courseType = document.getElementById('courseType').value;
        if (courseType == 1) {
            $("#courseIdDiv").show();
            $("#courseChapterIdDiv").hide();
            $("#chapterDiv").hide();
            $("#cardDiv").hide();
        } else if (courseType == 2) {
            var chapters = ${chapters};
            var id = $("#courseChapterIds").val();
            $("#chapterIds").empty();
            for (var i = 0; i < chapters[id].length; i++) {
                $("#chapterIds").append("<option value='" + chapters[id][i].id + "'>" + chapters[id][i].chapterName + "</option>");
            }
            $("#courseIdDiv").hide();
            $("#courseChapterIdDiv").show();
            $("#chapterDiv").show();
            $("#cardDiv").hide();
        } else if (courseType == 3) {
            $("#courseIdDiv").hide();
            $("#courseChapterIdDiv").hide();
            $("#chapterDiv").hide();
            $("#cardDiv").show();
        } else {
            $("#courseIdDiv").hide();
            $("#courseChapterIdDiv").hide();
            $("#chapterDiv").hide();
            $("#cardDiv").hide();
        }
    }

    $(function () {
        var courseType = document.getElementById('courseType').value;
        if (courseType == 1) {
            $("#courseIdDiv").show();
            $("#courseChapterIdDiv").hide();
            $("#chapterDiv").hide();
            $("#cardDiv").hide();
        } else if (courseType == 2) {
            var chapters = ${chapters};
            var id = $("#courseChapterIds").val();
            $("#chapterIds").empty();
            var foreignId = ${not empty courseShare.foreignId ? courseShare.foreignId : 0};
            for (var i = 0; i < chapters[id].length; i++) {
                if (foreignId == chapters[id][i].id) {
                    $("#chapterIds").append("<option selected='selected' value='" + chapters[id][i].id + "'>" + chapters[id][i].chapterName + "</option>");
                } else {
                    $("#chapterIds").append("<option value='" + chapters[id][i].id + "'>" + chapters[id][i].chapterName + "</option>");
                }
            }
            $("#courseIdDiv").hide();
            $("#courseChapterIdDiv").show();
            $("#chapterDiv").show();
            $("#cardDiv").hide();
        } else if (courseType == 3) {
            $("#courseIdDiv").hide();
            $("#courseChapterIdDiv").hide();
            $("#chapterDiv").hide();
            $("#cardDiv").show();
        } else {
            $("#courseIdDiv").hide();
            $("#courseChapterIdDiv").hide();
            $("#chapterDiv").hide();
            $("#cardDiv").hide();
        }
    });
</script>
</html>